<template>
  <div class="file-option">
    <div class="wrap">
      <div class="header">Excel转JSON</div>
      <div class="content excel-to-json">
				<div class="left">
					<div class="option-but">
						<el-upload
							v-model:file-list="localFileList"
							class="excel-file-input"
							action=""
							:on-change="handleChange"
							:on-remove="handleRemove"
							:multiple="false"
							accept=".xlsx,.xls"
							:auto-upload="false"
						>
							<el-button type="primary">点击上传</el-button>
						</el-upload>
						<el-tooltip effect="dark" placement="top-start" content="index: 读取Excel文件第几shell表的下标">
							<el-input v-model="sheetIndex" @change="changeSheetIndex"></el-input>
						</el-tooltip>
						<el-tooltip effect="dark" placement="top-start" content="转换数据的 key 名">
							<el-button @click="transformKey">转换key</el-button>
						</el-tooltip>
					</div>
					<div class="transform-keys">
						<div
							v-for="(item, index) in transformKeysArr"
							:key="index"
							class="item-key"
						>
							<el-checkbox v-model="item.checked" />
							<el-input v-model="item.originKey" disabled />
							<el-input v-model="item.resultKey"/>
						</div>
					</div>
				</div>
				<div class="right">
					<vue-json-editor
						v-model:value="excelJSON"
						:show-btns="false"
						:mode="'code'"
						lang="zh"
						class="my-editor"
					/>
				</div>
      </div>
    </div>
  </div>
</template>

<script setup name="FileOption">
// eslint-disable-next-line no-unused-vars
import { ref, onMounted, reactive, watch, defineProps, defineEmits, computed } from 'vue'
// import router from '@/router'
import vueJsonEditor from '@/components/VueJsonEditor'
const XLSX = require('xlsx');

// const routerReactive = reactive(router)
const excelData = reactive([]) // excel 解析完初始数据
const excelJSON = ref({})
const transformKeysArr = ref([])
const sheetIndex = ref(0)
const localFileList = ref([]) // 文件

// eslint-disable-next-line no-unused-vars
const transformKeysObj = computed(()=>{
	const obj = {}
	transformKeysArr.value.forEach(item=>{
		obj[item.originKey] = item.resultKey
	})
	return obj
})
// watch(routerReactive, () => {
// })
// 挂载后
onMounted(() => {
})
// 上传文件
function handleChange(file, fileList) {
	if (fileList.length > 1) {
		fileList.splice(0, 1);
	}
	localFileList.value = fileList;
	console.log('localFileList--', localFileList.value)
	readExcel()
}
// 移除文件
function handleRemove() {
	localFileList.value = []
}
// 改变读取excel 的shell Index
function changeSheetIndex () {
	readExcel(sheetIndex.value)
}
// 读取 excel 数据
async function readExcel(index) {
	try {
		const fileData = await localFileList.value[0].raw.arrayBuffer()
		const workbook = XLSX.read(fileData)
		const sheet_name_list = workbook.SheetNames
		const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[index || sheetIndex.value]])
		excelData.value = data
		excelJSON.value = data
		initTransformExcelKeys()
	} catch (error) {
		console.log('excel转json出错-error-', error)
	}
}
// 上传文件
// async function fileChange() {
// 	const excelDom = document.querySelector('.excel-file-input')
// 	const files = excelDom.files
// 	console.log('files[0]--', files[0])
// 	if(files.length > 0) {
// 		try {
// 			const fileData = await files[0].arrayBuffer()
// 			const workbook = XLSX.read(fileData)
// 			const sheet_name_list = workbook.SheetNames
// 			const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[sheetIndex.value]])
// 			excelData.value = data
// 			excelJSON.value = data
// 			initTransformExcelKeys()
// 		} catch (error) {
// 			console.log('excel转json出错-error-', error)
// 		}
// 	}
// }

// 初始化 keys 转换数据
function initTransformExcelKeys() {
	transformKeysArr.value = []
	const excelCellKeys = excelData.value.length === 0 ? [] : Object.keys(excelData.value[0])
	excelCellKeys.forEach((key)=>{
		// const chart = 'abcdefghijklmnopqrstuvwxyz' chart.charAt(index)
		transformKeysArr.value.push({originKey: key, resultKey: '', checked: true })
	})
}

function transformKey() {
	let excelDataTemp = [...excelData.value]
	excelDataTemp = excelDataTemp.map(item=>{
		const resItem = {}
		transformKeysArr.value.forEach(keyItem=>{
			if(!keyItem.checked) return
			resItem[keyItem.resultKey || keyItem.originKey] = item[keyItem.originKey]
		})
		return resItem
	})
	excelJSON.value = excelDataTemp
}
</script>
<style lang="scss" scoped>
.file-option {
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  .wrap {
		.header {
			line-height: 30px;
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		.content {
			padding: 14px;
			border-radius: 8px;
			background-color: var(--theme-weaken-color-10);
			&.in-line {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
  }
	.option-but {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 10px;
		.el-input {
			max-width: 100px;
		}
		.el-button--mini {
			height: 28px;
		}
	}
	.excel-to-json {
		display: flex;
		min-height: 400px;
		.left {
			flex: 0 0 35%;
			margin-right: 1.5%;
		}
		.right {
			flex: 0 0 63.5%;
		}
		.transform-keys {
			max-height: 450px;
			margin-top: 20px;
			overflow-y: auto;
			.item-key {
				display: flex;
				gap: 10px;
				&:not(:last-child) {
					margin-bottom: 10px;
				}
			}
		}
	}
}
</style>
